<template>
	<view class="newBox">
		<view class="itemBox">

			<view class="itemBox-item" v-for="(item,index) in news" :key="index">
				<view class="itemBox-item-one">
					<view class="errorText">{{item.subDes}}</view>
					<view class="errorD" v-if="!item.status">
						<view class="dian"></view>
					</view>
				</view>
				<view class="itemBox-item-two">
					<view class="code">{{item.deviceSn}}</view>
					<view class="time">{{item.realTime}}</view>
				</view>
			</view>

		</view>

		<up-back-top :scroll-top="scrollTop"></up-back-top>
		<u-toast ref="uToast"></u-toast>
		
		<up-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" />
	</view>
</template>

<script setup>
	import {
		useWebsocket
	} from "@/stores/websocket.js";
	import {
		computed,
		toRefs,
		watch,
		onMounted,
		ref,
		reactive,
		nextTick,
		getCurrentInstance
	} from 'vue'
	let {
		proxy
	} = getCurrentInstance();
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	const scrollTop = reactive(1500)
	const itemList = reactive([])
	let status = reactive('loadmore')
	const loadingText = ref('努力加载中')
	const loadmoreText = ref('轻轻上拉')
	const nomoreText = ref('实在没有了')
	const listQuery = reactive({
		total: 0,
		pageNum: 1,
		pageSize: 10
	})
	const store = useWebsocket()
	let news = ref([])
	const newOBJ= computed(()=> store.newObj)
	watch(newOBJ, (newItems, oldItems) => {
		if(newItems){
			news.value.push(newItems)
		}
	},{
      deep: true
    });

	const getList = (pageNum, pageSize) => {
		let opts = {
			url: proxy.$api.getNewList,
			method: "POST",
		};
		let data = {
			pageNum: pageNum,
			pageSize: pageSize
		};

		proxy.$request.httpTokenRequest(opts, data).then((res) => {
			if (res.data.code === 200) {
				listQuery.total= res.data.total
				if (res.data.rows.length > 0) {
					res.data.rows.map((item, index) => {
						news.value.push(item)
					})
				} else {

				}


			} else {
				proxy.$refs.uToast.show({
					type: 'error',
					message: res.data.msg
				})
			}
		}).catch((err) => {
			proxy.$refs.uToast.show({
				type: 'error',
				message: err
			})
		})

	}
	onReachBottom(() => {



		status = 'loading';
		listQuery.pageNum = ++listQuery.pageNum;
		getList(listQuery.pageNum, listQuery.pageSize)
		if (listQuery.total < 10) status = 'nomore';
		else  status = 'loading';

	})
	onMounted(() => {
		getList(listQuery.pageNum, listQuery.pageSize)
	})
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>

<style lang="scss">
	.newBox {
		padding: 32rpx 16rpx;
		box-sizing: border-box;

		.itemBox {
			&-item {
				margin-bottom: 24rpx;
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 16rpx;
				box-sizing: border-box;

				&-one {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					position: relative;

					.errorText {
						flex: 95%;
						font-size: 28rpx;
						color: #333;

					}

					.errorD {
						flex: 5%;

						.dian {
							position: absolute;
							top: 5rpx;
							right: 5rpx;
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							background: #F63B2B;
						}

					}

				}

				&-two {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.code {
						font-size: 22rpx;
						color: #000;
						font-weight: 550;
					}

					.time {
						font-size: 18rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>